/**
 * Created by user on 16/5/25.
 */

import React, {
    Component,
} from 'react'

import {
    StyleSheet,
    View,
    WebView,
    Dimensions,
    Platform,
    ImageBackground,
    ScrollView,
    Alert,
    // FlatList,
    TouchableOpacity,
    Text, Image
    //Toast
} from 'react-native';
import Banner from 'react-native-swiper';
import VideoPlayerPage from './Control/Videopage'
import BasePage from './BasePage';
import Video from 'react-native-video'
import CommonStyle from './Component/CommonStyle'
import {Theme, NavigationPage, ListRow, NavigationBar, Label, Button} from 'teaset';

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
const X_WIDTH = 375;
const X_HEIGHT = 812;
import BoundPage from './BoundPage'
import Swiper from 'react-native-swiper';
import LoginPage from "./LoginPage";

var iPX = (Platform.OS === 'ios' && ((screenH === X_HEIGHT && screenW === X_WIDTH) || (screenH === X_WIDTH && screenW === X_HEIGHT))) ? true : false


const HTML = `
<!DOCTYPE html>
<html>
  <head>
    <title>HTML字符串</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=320, user-scalable=no">
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font: 62.5% arial, sans-serif;
        background: #ccc;
      }
      h1 {
        padding: 45px;
        margin: 0;
        text-align: center;
        color: #33f;
      }
    </style>
  </head>
  <body>
    <h1>加载静态的HTML文本信息</h1>
  </body>
</html>
`;
const screenWidth = Dimensions.get('window').width;
export default class WebcomePage extends BasePage {


    handleMethod(isConnected) {
        console.log('test', (isConnected ? 'online' : 'offline'));
    }

    constructor(props) {

        super(props);
        this._onChangecount = this._onChangecount.bind(this);
        this.player = null

        this.state = {
            isplay: true,
            volume: 1,
            muted: false,
            resizeMode: 'contain',
            duration: 0.0,
            slideValue: 0.00,
            currentTime: 0,
            controls: false,
            paused: true,
            ignoreSilentSwitch: null,
            isBuffering: false,
            flag: true,

            data: [],
            ...this.state,
            showValue: "",
            postion: 0,
            topHeight: 210,
            statusHeight: 20,
            Replycontent: '',
            isvisable: true,
            videourl: require('./images/welcome1.mp4'),
            num: 0,
            wenzititle: require('./images/welcome_text1.png'),
            oneis: true,
            twois: false,
            threeis: false,
            fouris: false
        };
    }

    componentWillMount() {
    }

    componentWillUnmount() {
    }

    onLoad() {

    }

    onProgress() {

    }

    onBuffer() {

    }

    onEnd() {

    }

    webOnError(err) {

        //this.refs[WEBVIEW_REF].reload();
    }

    webStartLoad(res) {


    }

    _onChangecount(inputData) {

        this.setState({Replycontent: inputData});
    }

    _saveData() {
        this.navigator.resetTo({
            view: <LoginPage/>
        })
    }

    popdalog() {
        Alert.alert('温馨提示', '尚未绑定网关，无法使用场景，请先绑定网关', [{
            text: '取消',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel'
        }, {
            text: '去绑定', onPress: () => {
                this.navigator.push({
                    view: <BoundPage/>
                })
            }
        },])

    }


    render() {

        return (

            <View style={{width: screenW, height: screenH}}>
                <View style={{width: screenW, height: screenH}}>
                    <Swiper
                        style={styles.swiper}
                        loop={false}
                        removeClippedSubviews={false}
                        horizontal={true}
                        paginationStyle={{bottom: 40}}

                        onIndexChanged={
                            (index) => {
                                this.setState({

                                    videourl: index == 0 ? require('./images/welcome1.mp4') : index == 1 ? require('./images/welcome2.mp4') : index == 2 ? require('./images/welcome3.mp4') : require('./images/welcome4.mp4'),

                                    num: index == 0 ? 0 : index == 1 ? 1 : index == 2 ? 2 : 3,
                                    wenzititle: index == 0 ? require('./images/welcome_text1.png') : index == 1 ? require('./images/welcome_text2.png') : index == 2 ? require('./images/welcome_text3.png') : require('./images/welcome_text4.png'),

                                    oneis: index == 0 ? !this.state.oneis : false,
                                    twois: index == 1 ? !this.state.twois : false,
                                    threeis: index == 2 ? !this.state.threeis : false,
                                    fouris: index == 3 ? !this.state.fouris : false,
                                })
                                ;

                            }
                        }
                        showsButtons={false}>
                        <View

                            style={{width: screenW, height: screenH,}}
                        >
                        </View>
                        <View

                            style={{width: screenW, height: screenH}}
                        >
                        </View>
                        <View

                            style={{width: screenW, height: screenH}}
                        >
                        </View>
                        <View

                            style={{width: screenW, height: screenH}}
                        >
                        </View>
                    </Swiper>
                </View>
                <Video
                    source={this.state.videourl}

                    style={{width: screenW, height: screenH, position: 'absolute'}}

                >
                </Video>

                <Text
                    style={{
                        width: 100,
                        textAlign: 'center',
                        position: 'absolute',
                        bottom: 30, right: 20,
                        fontSize: 13
                    }}
                >
                    -- 易盈宝典 --
                </Text>


                <Image
                    resizeMode={'stretch'} style={{
                    position: 'absolute',
                    width: 200,
                    height: 60,
                    right: screenW / 2 - 100,
                    bottom: 100,
                }}
                    source={this.state.wenzititle}/>

                {
                    this.state.num != 3 ?

                        <View

                            style={{
                                position: 'absolute',
                                width: 200,
                                flexDirection: 'row',
                                justifyContent: 'center',

                                height: 20,
                                right: screenW / 2 - 100,
                                bottom: 40,
                            }}>
                            <View
                                roundAsCircle={true}
                                resizeMode={'stretch'} style={{
                                borderRadius: 3,
                                width: 6,
                                height: 6,
                                backgroundColor: this.state.oneis ? '#A39063' : '#1294EF'
                            }}
                            />
                            <View
                                roundAsCircle={true}
                                resizeMode={'stretch'} style={{
                                borderRadius: 3,
                                width: 6,
                                height: 6, marginLeft: 5,
                                backgroundColor: this.state.twois ? '#A39063' : '#1294EF'
                            }}
                            />
                            <View
                                roundAsCircle={true}
                                resizeMode={'stretch'} style={{
                                borderRadius: 3,
                                width: 6,
                                height: 6, marginLeft: 5,
                                backgroundColor: this.state.threeis ? '#A39063' : '#1294EF'
                            }}
                            />

                            <View
                                roundAsCircle={true}
                                resizeMode={'stretch'} style={{
                                borderRadius: 3,
                                width: 6,
                                height: 6, marginLeft: 5,
                                backgroundColor: this.state.fouris ? '#A39063' : '#1294EF'
                            }}
                            />

                        </View>

                        : <View

                            style={{
                                position: 'absolute',
                                width: 200,
                                flexDirection: 'row',
                                justifyContent: 'center',

                                height: 40,
                                right: screenW / 2 - 100,
                                bottom: 80,
                            }}>

                            <Button
                                title="跳转"
                                titleStyle={
                                    {
                                        fontSize: 11
                                    }
                                }
                                style={{marginLeft: 40, marginRight: 40, marginTop: 40, height: 30, width: 60}}
                                onPress={() => this._saveData()}
                                color="#A39063">
                            </Button>
                        </View>
                }


            </View>

        );
    }
}
var styles = StyleSheet.create({
    container2: {
        flex: 1,
        backgroundColor: '#efefef',
        justifyContent: 'flex-start', flexDirection: 'column',
        ...Platform.select({
            ios: {
                paddingTop: 0
            },
            android: {
                paddingTop: 0
            },
        }),
    },
    webView: {

        height: Dimensions.get('window').height - 64,
        width: Dimensions.get('window').width,
        //backgroundColor:'red',
    },
    webStyle: {

        paddingTop: Platform.OS === 'ios' ? 20 : 0,
    },
    wrapper: {
        height: 200
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },
    swiper: {},
    backgroundVideo: {
        width: '100%', marginTop: 0, height: 210
    },
    container: {
        flex: 1,
        marginBottom: iPX ? 34 : 0,
        width: CommonStyle.screenwidth
    },
    headerContainer: {
        width: CommonStyle.screenwidth,
        height: 210,
        alignItems: 'center', justifyContent: 'center'
    },
    scrollTab: {
        flex: 1,
    }
});